<template>
<page-view class="food-detail-page">
    <page-header title="菜品详情" :showBack="true"></page-header>

    <div class="content-box" v-if="true">
        <skeleton title avatar :row="5" :loading="loading">
               <!-- 菜品图片展示 -->
               <div class="food-img-box">
                   <img v-lazy="img" @click.stop="showThisImage">
               </div>
               <!-- 详情展示 -->
               <ul class="food-desc">
                   <li><span>菜品名称:</span>{{FoodDetail.food_name}}</li>
                    <li><span>菜品价格:</span>{{FoodDetail.price}}</li>
                     <li><span>菜品重量:</span>{{FoodDetail.weight}}</li>
                      <li class="food-intro">{{FoodDetail.food_desc}}</li>

               </ul>
        </skeleton>
    </div>

</page-view>
</template>

<script>

import { Skeleton,ImagePreview  } from 'vant';
import { useRoute } from 'vue-router';
import { onMounted,reactive, toRefs,getCurrentInstance, ref} from 'vue';
import Api from "../utils/api";
export default {
  components: { Skeleton,ImagePreview },
    name:'FoodDetail',
    setup (props) {
        //是否显示骨架屏，传 false 时会展示子组件内容
        // let loading=ref(true)

        let info=reactive({
            FoodDetail:{},
            loading:false,
        })

        //接收路由穿过来的信息菜品id
         let img=ref('');
        const {proxy}=getCurrentInstance()
        const getFoodById= async (id)=>{
             info.loading=true;
            info.FoodDetail=await Api.foodInfo.findById(id);
              info.loading=false;
               console.log( info.FoodDetail)
               img.value=proxy.BaseURL+info.FoodDetail.food_img
              

        }
       

    const route=useRoute()
    onMounted(() => {    
           getFoodById(route.query.fid)
        });


         //点击图片预览
        function showThisImage(){
            ImagePreview([img.value]);
        }

        return {showThisImage,...toRefs(info),img}
    }
}
</script>

<style lang="scss" scoped>
.food-detail-page{
    .content-box{
        .food-img-box {
            img{

            }
        }
        .food-desc{ 
            li{ 
                span{

                }
                &.food-intro{ 
                    
                }
            }
        }
    }
}

</style>